<template>
  <base-card>
    <!-- 标题 -->
    <div class="top-outer-layer">
      <div class="border-left"></div>
      <div class="add-text">服务包详情</div>
      <div class="title-item-img" v-if="servicePackageData.state == 1">
        <img src="../../assets/u1604.png" class="outer-img">
        <img src="../../assets/u1605.png" class="outer-img-small">
        <div class="title-img-text-green">待审核</div>
      </div>
      <div class="title-item-img" v-if="servicePackageData.state == 2">
        <img src="../../assets/u5728.png" class="outer-img">
        <img src="../../assets/u5729.png" class="outer-img-small">
        <div class="title-img-text-one">使用中</div>
      </div>
      <div class="title-item-img" v-if="servicePackageData.state == 3">
        <img src="../../assets/u1690.png" class="outer-img">
        <img src="../../assets/u1690.png" class="outer-img-small">
        <div class="title-img-text">已停用</div>
      </div>
      <div class="title-item-img" v-if="servicePackageData.state == 0">
        <img src="../../assets/u1754.png" class="outer-img">
        <img src="../../assets/u1755.png" class="outer-img-small">
        <div class="title-img-text-red">已驳回</div>
      </div>
    </div>
    <div class="serc-detail">
      <div class="item-image">
        <img :src="servicePackageData.image" alt="">
      </div>
      <div class="right-details">
        <div class="title-item">
          <div class="left-de-item-first">{{ servicePackageData.name }}</div>
          <div class="right-de-item">
            <el-tag>{{ servicePackageData.type }}</el-tag>
          </div>
        </div>
        <div class="title-item">
          <div class="left-de-item">订购定价</div>
          <div class="right-de-item">
            ￥{{ servicePackageData.price }}
          </div>
        </div>
        <div class="title-item">
          <div class="left-de-item-tag">标签</div>
          <div class="right-de-item">
            <el-tag>{{servicePackageData.tagIds?.map(item => item.name).join('')}}</el-tag>
          </div>
        </div>
        <div class="title-item">
          <div class="left-de-item">服务对象</div>
          <div class="right-de-item">{{ servicePackageData.client }}</div>
        </div>
        <div class="title-item">
          <div class="left-de-item">签约周期</div>
          <div class="right-de-item">{{ servicePackageData.period }}</div>
        </div>
        <div class="title-item-last">
          <div class="last-item">服务介绍</div>
          <div class="last-right">{{ servicePackageData.intro }}</div>
        </div>
      </div>
    </div>
    <!-- 服务项目 -->
    <ServiceItem :columns="columns" :serciveItem="serciveItem" :packageId="packageId" @getData="getData"></ServiceItem>
    <!-- 下面的按钮 -->
    <div v-if="servicePackageData.state == 1">
      <el-button type="primary" @click="toUpdate(packageId)">编辑</el-button>
      <el-button type="success" @click="openDia">审核通过</el-button>
      <el-button type="danger" @click="open = true">驳回</el-button>
      <el-button @click="onBack">返回</el-button>
    </div>
    <div v-if="servicePackageData.state == 2">
      <el-button type="primary" @click="toUpdate(packageId)">编辑</el-button>
      <el-button type="danger" @click="close">停用</el-button>
      <el-button @click="onBack">返回</el-button>
    </div>
    <div v-if="servicePackageData.state == 0">
      <el-button type="primary" @click="toUpdate(packageId)">编辑</el-button>
      <el-button @click="onBack">返回</el-button>
    </div>
    <div v-if="servicePackageData.state == 3">
      <el-button type="primary" @click="toUpdate(packageId)">编辑</el-button>
      <el-button type="success" @click="openDiastart">启用</el-button>
      <el-button @click="onBack">返回</el-button>
    </div>

    <el-dialog v-model="open" title="驳回确认" width="500">
      <el-form :model="form">
        <el-form-item label="驳回原因" :label-width="formLabelWidth">
          <el-input v-model="form" autocomplete="off" type="textarea" placeholder="请输入驳回原因" clearable
            style="width: 580px; height: 120px; margin-bottom: 16px;" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open = false">取消</el-button>
          <el-button type="primary" @click="openBack">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </base-card>
</template>

<script setup>
import { useRoute } from 'vue-router';
import BaseCard from '../../components/base-card/BaseCard.vue';
import { markRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue';
import { getServiceByIdApi, updateServicePackageApi } from '../../api/servicePacksge';
import ServiceItem from './ServiceItem.vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
console.log(route.params);
const packageId = route.params._id
// 拿到点击的那个服务包详情的id
console.log(packageId);
// 服务包详情的数据
const servicePackageData = ref({})
// 服务项目的数据
const serciveItem = ref([])
const form = ref('') //驳回的原因
onMounted(() => {
  getData()
})
const getData = () => {
  getServiceByIdApi({
    _id: route.params._id
  }).then(res => {
    if (res.code == 200) {
      console.log(res);
      servicePackageData.value = res.data
      serciveItem.value = res.data.serviceItemIds
      console.log(serciveItem.value);
    }
  })
}
// 审核的弹窗 发修改的请求
const openDia = () => {
  ElMessageBox.confirm(
    '确定通过此服务包上架申请吗?',
    '审核确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      icon: markRaw(QuestionFilled),
      type: 'warning',
    }
  )
    .then(() => {
      updateState()
      // 获取最新的数据
    })
    .catch(() => {
    })
}
const close = () => {
  ElMessageBox.confirm(
    '停用后用户将无法进行订购，已经订购的用户不受影响，确定停用此服务包吗?',
    '停用确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      icon: markRaw(QuestionFilled),
      type: 'warning',
    }
  )
    .then(() => {
      updateClose()
    })
    .catch(() => {
    })
}
const openDiastart = () => {
  ElMessageBox.confirm(
    '确定启用此服务包吗?',
    '启用确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      icon: markRaw(QuestionFilled),
      type: 'warning',
    }
  )
    .then(() => {
      updateStart()
      // 获取最新的数据
    })
    .catch(() => {
    })
}
// 修改状态值
const updateState = () => {
  updateServicePackageApi({
    _id: route.params._id,
    state: 2
  })
    .then(res => {
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '审核通过',
        })
        getData()
        console.log(res.data);
      }
    })
}
const updateStart = () => {
  updateServicePackageApi({
    _id: route.params._id,
    state: 2
  })
    .then(res => {
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '启用成功',
        })
        getData()
        console.log(res.data);
      }
    })
}
const updateClose = () => {
  updateServicePackageApi({
    _id: route.params._id,
    state: 3
  })
    .then(res => {
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '停用成功',
        })
        getData()
        console.log(res.data);
      }
    })
}

// 驳回的弹窗 修改状态值
const open = ref(false)
// 点击确认发送驳回的请求
const openBack = () => {
  updateServicePackageApi({
    _id: route.params._id,
    state: 0
  }).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: 'success',
        message: '审核驳回成功',
        reason: form.value
      })
      getData()
      open.value = false
    }
  })
}
const onBack = () => {
  router.back()
}
const toUpdate = (_id) => {
  router.push(`/data/servicePack/update/${_id}`)
}
// 表头的数据
const columns = [
  {
    label: '项目编号',
    prop: '_id',
  },
  {
    label: '项目名称',
    prop: 'name',
  },
  {
    label: '次数',
    prop: 'count',
  },
  {
    label: '项目类型',
    prop: 'type'
  },
  {
    label: '项目介绍',
    prop: 'intro'
  },
]
</script>

<style scoped lang="scss">
.top-outer-layer {
  display: flex;
  height: 40px;
  margin-bottom: 10px;
}

.border-left {
  width: 6px;
  height: 24px;
  background-color: rgba(41, 132, 248, 1);
  border-radius: 10px;
}

.add-text {
  margin-left: 10px;
  font-size: 18px;
  color: rgba(51, 51, 51, 0.898039215686275);
}

.title-item-img {
  position: relative;

  .outer-img-small {
    width: 39px;
    height: 39px;
    position: absolute;
    left: 9px;
    top: 9px;
  }

  img {
    width: 56px;
    height: 56px;
    margin-left: 15px;
    margin-top: 5px;
  }

  .title-img-text {
    width: 64px;
    height: 24px;
    text-align: center;
    color: #FDDB78;
    border: 1px solid #FDDB78;
    position: absolute;
    left: 10px;
    top: 20px;
    transform: rotate(-41deg);
  }

  .title-img-text-green {
    width: 64px;
    height: 24px;
    text-align: center;
    color: #28d094;
    border: 1px solid #28d094;
    position: absolute;
    left: 10px;
    top: 20px;
    transform: rotate(-41deg);
  }

  .title-img-text-red {
    width: 64px;
    height: 24px;
    text-align: center;
    color: #fa746b;
    border: 1px solid #fa746b;
    position: absolute;
    left: 10px;
    top: 20px;
    transform: rotate(-41deg);
  }

  .title-img-text-one {
    width: 64px;
    height: 24px;
    text-align: center;
    color: #2984F8;
    border: 1px solid #2984F8;
    position: absolute;
    left: 10px;
    top: 20px;
    transform: rotate(-41deg);
  }
}

.right-details {
  margin: 20px 10px;
  flex-grow: 1;
}

.serc-detail {
  width: 100%;
  height: 300px;
  background-color: #F2F7FB;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
}

.item-image {
  margin: 20px 20px;

  img {
    width: 336px;
    height: 260px;
  }
}

.title-item {
  // flex-grow: 1;
  display: flex;
  height: 40px;
  white-space: wrap;

  .left-de-item-first {
    font-size: 18px;
    color: #333333;
    margin-right: 10px;
  }
}

.left-de-item {
  width: 65px;
  height: 40px;
  font-size: 13px;
  color: #999999;
  // margin-right: 20px;
}

.left-de-item-tag {
  font-size: 13px;
  color: #999999;
  margin-right: 50px;
  margin-bottom: 20px;
}

.right-de-item {
  font-size: 13px;
  color: #999999;
}

.title-item-last {
  display: flex;

  .last-item {
    width: 95px;
    font-size: 13px;
    color: #999999;
    // margin-right: 10px;
  }

  .last-right {
    font-size: 13px;
    color: #999999;
    margin-right: 10px;
  }
}
</style>